<template>
    <div class="banner">
        <Banner :bg="bannerImage" :size="'cover'" use-mask>
            <h1>{{currentTitle}}</h1>
        </Banner>
    </div>
    <div class="content">
        <d-row justify="center">
            <d-col :md="22" :lg="18">
                <Content></Content>
            </d-col>
        </d-row>
    </div>
</template>

<script lang="ts" setup>
import Banner from '@/components/banner/index.vue'
import Content from './components/content.vue';
import { useImage } from '@/hooks/useImage';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
const routes = useRoute();
const router = useRouter();
const currentTitle = ref(routes.meta.title ?? '');
const bannerImage = ref(useImage((routes.meta.bg as string) ?? ''));
router.beforeEach((to) => {
    currentTitle.value = to.meta.title ?? '';
})
</script>
<style lang="scss">
@import "../../assets/styles/doc.scss";
.banner{
    height: 350px;
    .banner__wrapper{
        height: 100%;
        h1 {
            color: white;
            margin: auto !important;
        }
    }
}
.side{
    position: sticky;
    top: 10px;
}
.content{
    padding: 1em 0;
    box-sizing: border-box;
}
.content__doc{
    padding: 0 1.5em;
    box-sizing: border-box;
}
</style>